<script setup>

import BlackCard from "@/components/card/BlackCard.vue";
</script>

<template>
  <div class="view-container">
    <black-card title="(・∀・)つ 404">
      <div class="not-found">
        <h1>干什么 干什么!</h1>
        <h1>(╯°▽°)╯ ┻━┻</h1>
        <p>没做好呢,别看别看,ヘ(￣ω￣ヘ)走开</p>
        <p>The Page You Want Doesn't Exist!</p>
        <router-link to="/">回到首页 _(:3 」∠ )_</router-link>
        <router-link to="/">Go back to Home</router-link>
      </div>
    </black-card>
  </div>
</template>

<style scoped>
.not-found {
  height: 20em;
  text-align: center;
  margin-top: 2em;
}

.not-found h1 {
  font-size: 2em;
  color: #333;
}

.not-found p {
  font-size: 1.2em;
  color: #666;
}

.not-found a {
  display: inline-block;
  margin-top: 2em;
  color: #42b983;
  text-decoration: none;
  font-size: 1.1em;
}

.not-found a:hover {
  text-decoration: underline;
}
</style>